<script lang="ts">
  import { ROUTER_PATHS, useRouter } from '@/constants/router';
  import { defineComponent, ref } from '@vue/composition-api';

  export default defineComponent({
    setup() {
      const router = useRouter();
      const buttonList = ref([
        {
          text: '我的收藏',
          url: ROUTER_PATHS.COLLECTION
        },
        {
          text: '我的学习历史',
          url: ROUTER_PATHS.STUDY_HISTORY
        },
        {
          text: '我的错题',
          url: ROUTER_PATHS.ERROR_WORDS
        }
      ]);

      function toPage(url: string) {
        router.navigateTo({
          url
        });
      }

      return {
        buttonList,
        toPage
      };
    }
  });
</script>

<template>
  <view class="word">
    <template v-for="(item, index) in buttonList">
      <view class="word-item" :key="index" @click.stop="toPage(item.url)"> {{ item.text }} </view>
    </template>
  </view>
</template>

<style lang="scss" scoped>
  .word {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 300rpx;

    &-item {
      width: 80%;
      height: 12vw;
      margin-bottom: 4vw;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 1px 1px 10px #dadada;
      cursor: pointer;
      position: relative;
      transition: 0.3s all;
      font-size: 3.5vw;
      color: #383838;
      text-align: center;
      line-height: 12vw;
      overflow: hidden;
      &:active {
        background-color: darkseagreen;
      }
    }
  }
</style>
